<template>
  <div class="header">
    <el-row type="flex">
      <div class="first">购物网</div>
      <div style="flex: 1">
        <!--!!!!!!!-->
        <el-menu
          router
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#495060"
          text-color="#909399"
          active-text-color="#fff"
          active-background-color="#333"
        >
          <el-menu-item index="/home">手机</el-menu-item>
          <el-menu-item index="/clothes">服饰</el-menu-item>
          <el-menu-item index="/seafood">生鲜</el-menu-item>
          <el-menu-item index="/books">图书 </el-menu-item>
        </el-menu>
      </div>
      <div class="search">
        <el-input placeholder="请输入筛选内容" v-model="search">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <div class="searchbtn">
        <el-button type="primary">搜索</el-button>
      </div>
      <div class="shopcart" @click="intoShopcart">
        购物车<i class="el-icon-shopping-cart-2"></i>
      </div>
      <div class="admin">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            admin <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">退出登录</el-dropdown-item>
            <el-dropdown-item>个人信息</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-row>
  </div>
</template>
<script>
// 接收一个参数 用于更改当前的 activeIndex
export default {
  props: ["index"],
  data() {
    return {
      search: "",
      activeIndex2: this.index,
    };
  },
  created() {},
  methods: {
    async handleCommand(command) {
      if (command === "a") {
        const res = await this.$http.post("/v1/logout");

        if (res.data.code == 1) {
          this.$router.push("/login");
        }
      }
    },
    intoShopcart() {
      this.$router.push("/shopcart");
    },
  },
};
</script>
<style  lang='less'  scoped>
.header {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #495060;
  height: 60px;
  text-align: center;
  margin-bottom: 20px;
}
.first {
  width: 200px;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  color: #fff;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom-color: #333 !important;
}
.shopcart {
  line-height: 60px;
  color: skyblue !important;
  cursor: pointer;
}
.admin /deep/ {
  width: 150px;
  font-size: 16px;
  cursor: pointer;
  color: #fff !important;
  text-align: center;
  line-height: 60px;
}
.el-dropdown {
  color: #fff !important;
}
.search {
  margin-top: 10px;
  margin-right: -60px;
  width: 300px;
  height: 30px;
}
.el-button /deep/ {
  width: 60px;
}
.searchbtn {
  z-index: 999;
  margin-top: 10px;
  height: 30px;
  margin-right: 50px;
}
</style>